<script setup>
import { ref, watch, nextTick, computed } from 'vue';
import { 
  LeftOutlined, 
  RightOutlined, 
  DownOutlined,
  CloseOutlined,
  HomeOutlined
} from '@ant-design/icons-vue';
import route from '@/router/index';
import { useMenu } from '@/pinia-store/index.js';
import { useTheme } from '@/pinia-store/index';


const themeColor = computed(() => {
  return useTheme().mode === 'dark' ?  '#1d1d1d' : '#fff'
}) 
const borderColor = computed(() => {
  return useTheme().mode === 'dark' ? '#6b6b6b' : '#f4f4f4'
}) 

const currentPth = ref('')
const closeRoute = (item,index) => {
  if (item.path === currentPth.value) {
    if (index > 0) {
      useMenu().menuClick({item: useMenu().historyRouters[index-1]})
    } else if (useMenu().historyRouters.length > 1) {
      useMenu().menuClick({item: useMenu().historyRouters[index + 1]})
    }
  }
  useMenu().historyRouters.splice(index, 1)
  if (!useMenu().historyRouters.length) {
    useMenu().menuClick({item:{path: '/'}})
  }
}
const closeRouteRigth = (type) => {
  if (!useMenu().historyRouters.length) {
    return
  }
  if (type === 'current') {
    const index = useMenu().historyRouters.findIndex(item => {
      return item.path === currentPth.value
    })
    closeRoute(useMenu().historyRouters[index], index)
  } else if (type ==='other') {
    const findCurrent = useMenu().historyRouters.find(item => {
      return item.path === currentPth.value
    })
    useMenu().historyRouters = [{...findCurrent}]
  } else {
    useMenu().historyRouters = []
    useMenu().menuClick({item:{path: '/'}})
  }
}
watch(() => route, (val) => {
  currentPth.value = val.currentRoute.value.fullPath
  if (val.currentRoute.value.fullPath === '/') {
    return
  }
  let findIndex = useMenu().historyRouters.findIndex((item) => {
    return item.path === val.currentRoute.value.fullPath
  })
  nextTick(() => {
    if (routeBoxRef.value.scrollWidth > routeBoxRef.value.clientWidth) {
      isRoll.value = true
    } else {
      isRoll.value = false
    }
  })
  if (findIndex===-1) {
    setTimeout(() => {
      useMenu().historyRouters.push({
        title: document.title,
        path: val.currentRoute.value.fullPath,
        name: val.currentRoute.value.name
      })
    }, 0)
  }
}, {
  deep: true,
  immediate: true
})

const routeBoxRef = ref()
const isRoll = ref(false)
const setScrollPosition = (type) => {
  if (!isRoll.value) {
    return 
  }
  if (type === 'left' && routeBoxRef.value.scrollLeft !==0) {
    routeBoxRef.value.scrollLeft -= 114
  } else if(type==='right' && (routeBoxRef.value.clientWidth + routeBoxRef.value.scrollLeft) <= routeBoxRef.value.scrollWidth) {
    routeBoxRef.value.scrollLeft += 114
  }
}


</script>

<template>
  <div class="container-box">
    <div 
      class="arrow" 
      @click="setScrollPosition('left')"
    >
      <LeftOutlined />
    </div>

    <div class="router-box hide_scroll_bar" ref="routeBoxRef">
      <div 
        class="route-item" 
        :class="currentPth === '/' ? 'active-route' :''" 
        @click="useMenu().menuClick({item: {path: '/'}})"
      >
        <HomeOutlined />
        <span style="margin-left: 5px;">工作台</span>
      </div>
      <div 
        class="route-item animate__animated animate__bounceInRight"
        :class="currentPth === item.path ? 'active-route' :''" 
        v-for="(item,index) in useMenu().historyRouters" 
        :key="index"
        @click.stop="useMenu().menuClick({item})"
      >
        <span class="text-ellipsis">{{ item.title }}</span>
        <CloseOutlined @click.stop="closeRoute(item,index)"/>
      </div>
    </div>

    <div class="right-box">
      <div 
        class="arrow" 
        @click="setScrollPosition('right')"
      >
        <RightOutlined />
      </div>
      <div class="arrow">
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <DownOutlined />
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:;" @click="closeRouteRigth('current')">关闭当前标签页</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;"  @click="closeRouteRigth('other')">关闭其它标签页</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;"  @click="closeRouteRigth('all')">关闭全部标签页</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: v-bind(themeColor);
  overflow: hidden;
  border-top: 1px solid #f4f4f4;
  border-color: v-bind(borderColor);
  .arrow {
    padding: 0 15px;
    border-right: 1px solid #f4f4f4;
    border-color: v-bind(borderColor);
    cursor: pointer;
  }
  .router-box {
    display: flex;
    flex: 1;
    width: 0;
    height: 100%;
    align-items: center;
    overflow: hidden;
    overflow-x: scroll;
    
    @mixin active() {
      color: #1677ff;
      background: rgba(22, 119, 255, 0.1);
      ::before {
        content: '';
        width: 100%;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #1677ff;
      }
    }
    .route-item {
      width: max-content;
      height: 100%;
      position: relative;
      display: flex;
      padding: 0 20px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .anticon-close {
        margin-left: 6px;
        font-size: 12px;
      }
      span {
        width: max-content;
        max-width: 180px;
      }
      &:hover {
        @include active;
        background-color: #cfcfcf;
      }
    }
    .active-route {
      @include active;
    }
  }
  .right-box {
    display: flex;
    align-items: center;
    .arrow:first-child {
      border-left: 1px solid #f4f4f4;
      border-color: v-bind(borderColor);
    }
    .arrow:last-child {
      border: none;
    }
  }
}

</style>